<template>
  <div>
    <el-form
      :model="formValue"
      ref="formControl"
      :inline="false"
      class="demo-form-inline"
      label-suffix="："
      label-width="130px"
      size="mini"
    >
      <el-row v-for="(fieldGroup, index) in formModel" :key="'form_' + index">
        <div class="form-group-title" :model="index">
          {{ fieldGroup.groupName }}
        </div>
        <!--不循环row，直接循环col，放不下会自动往下换行。-->
        <el-col v-for="element in fieldGroup.fields" :key="element.name" :span="8" class="input-item-normal">
          <!--表单item组件，采用动态组件的方式-->
          <!-- <template> -->
          <component
            :is="ctlList[element.xtype]"
            v-model="formValue[element.name]"
            v-bind="element"
            @myChange="mySubmit"
            >{{ ctlList[element.xtype] }}
          </component>
          <!-- </template> -->
        </el-col>
      </el-row>
    </el-form>
    <el-button @click="resetForm">重置</el-button>
  </div>
</template>

<script lang="ts">
import { watch, ref, onMounted, reactive } from "vue";
import {
  formItemListKey,
  formItemComponents,
} from "./emap-form-item/emap-form-item.js";
import formatModel from "./controlManage/formatModel.js";

/**
 * @function div格式的表单控件
 * @description 可以依据json动态生成表单，可以多行多列、排序、插槽、验证等
 * @returns {*} Vue组件，表单控件
 */
export default {
  name: "el-form-div",
  components: {
    ...formItemComponents(), // 动态加载表单子控件
  },
  props: {
    formModel: Object, // 完整的model
    // partModel: Object, // 根据选项过滤后的model
    // miniModel: Object, // 精简的model
    // data: Object
  },
  setup(props, context) {
    // 控件字典
    const ctlList = formItemListKey;
    // console.log(formItemList)

    // 表单管理类
    // const {
    // formModel,
    // formMiniModel, // 精简的model
    // formColSort,
    // setFormColSort, // 设置组件排序
    // mySubmit
    // } = formManage(props, context)
    const formModel = formatModel(props, context); // formMiniModel, // 精简的model
    // formColSort,
    // setFormColSort, // 设置组件排序
    // mySubmit
    var formValue = reactive({});
    // 获取 $ref
    const formControl = ref(null);
    onMounted(() => {
      // console.log('表单dom', formControl)
    });

    // const resetForm = () => {
    //   // 清空表单
    //   formControl.value.resetFields()
    // }

    return {
      // resetForm, // 重置表单
      formControl, // 获取表单dom
      formModel, // 实体类
      formValue, // 表单值
      // // rules, // 验证规则
      // formColSort, // 排序依据
      ctlList,
    };
  },
};
</script>

<style scoped>
.form-group-title {
  padding: 8px 16px;
  background-color: var(--block-tip-bg-color);
  border-radius: 4px;
  border-left: 5px solid var(--el-color-primary);
  margin: 20px 0;
  text-align: left;
  width: 100%;
  height: 24px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  color: #1d2129;
}
.input-item-normal {
  padding-left: 20px;
}
.input-label {
  display: inline-block;
  text-align: left;
  height: 32px;
  line-height: 32px;
  min-width: 80px;
  width: 100%;
}
.input-el-content {
  display: inline-block;
  text-align: left;
  height: 32px;
  width: 100%;
}
.input-el-input {
  background: #f2f3f5;
  border-radius: 2px;
}
</style>
